<template>
	<view class="container">
		<uni-section title="对齐方式切换" type="line">
			<view class="pos">
				<text>label-position:</text>
				<uni-data-select class="pos-select" :clear="true" :value="position" placement="bottom" mode="underline"
					align="center" :localdata="labelPosition" @change="posChange"></uni-data-select>
			</view>

		</uni-section>

		<uni-section title="基本用法" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :rules="rules" label-width="100px" :modelValue="baseFormData"
					:label-position="position">
					<uni-forms-item label="姓名" required>
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="年龄" required>
						<uni-easyinput type="number" v-model="baseFormData.age" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item label="性别" required>
						<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
					</uni-forms-item>
					<uni-forms-item label="兴趣爱好" required>
						<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
					</uni-forms-item>
					<uni-forms-item label="自我介绍">
						<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
					</uni-forms-item>
					<uni-forms-item label="日期时间">
						<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="baseFormData.datetimesingle" />
					</uni-forms-item>
					<uni-forms-item label="支付方式">
						<uni-data-select v-model="baseFormData.pay" :localdata="payList"
							@change="change"></uni-data-select>
					</uni-forms-item>
					<button type="primary" @click="submitForm">提交</button>
				</uni-forms>
			</view>
		</uni-section>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	import {
		onReady
	} from '@dcloudio/uni-app'

	const baseForm = ref()
	const position = ref('top')

	const labelPosition = ref([{
		text: "left",
		value: "left"
	}, {
		text: 'top',
		value: 'top'
	}])

	const sexs = ref([{
		text: '男',
		value: 0
	}, {
		text: '女',
		value: 1
	}, {
		text: '保密',
		value: 2
	}])

	const hobbys = ref([{
		text: '跑步',
		value: 0
	}, {
		text: '游泳',
		value: 1
	}, {
		text: '绘画',
		value: 2
	}, {
		text: '足球',
		value: 3
	}, {
		text: '篮球',
		value: 4
	}, {
		text: '其他',
		value: 5
	}])

	const payList = ref([{
		text: "支付宝",
		value: 0
	}, {
		text: "微信",
		value: 1
	}, {
		text: "银联",
		value: 2
	}])

	const baseFormData = reactive({
		name: "",
		age: "",
		hobby: [],
		sex: 0,
		pay: ""
	})


	const rules = reactive({
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入姓名'
			}]
		},
		age: {
			rules: [{
				required: true,
				errorMessage: '请输入年龄',
			}, {
				validateFunction: (rule, value, data, callback) => {
					// 异步需要返回 Promise 对象
					return new Promise((resolve, reject) => {
						setTimeout(() => {
							if (value > 10) {
								// 通过返回 resolve
								resolve()
							} else {
								// 不通过返回 reject(new Error('错误信息'))
								reject(new Error('年龄必须大于十岁'))
							}
						}, 2000)
					})
				}
			}]
		},
		sex: {
			rules: [{
				required: true,
				errorMessage: '请选择性别'
			}]
		},
		hobby: {
			rules: [{
				required: true,
				errorMessage: '请至少选择一项兴趣爱好'
			}]
		}
	})


	onReady(() => {
		uni.showToast({
			title: "onReady"
		})

		baseForm.value.setRules(rules)
	})

	const submitForm = async () => {
		try {
			await baseForm.value.validate()
			uni.showToast({
				title: '校验通过',
				icon: 'success'
			})
		} catch ({
			errors
		}) {
			// 表单会自动标红，这里可以额外提示
			uni.showToast({
				title: errors[0].errorMessage,
				icon: 'none'
			})
		}
	}

	const posChange = (val) => {
		console.log(val);
		position.value = val
		uni.showToast({
			icon: 'none',
			title: val
		})

	}
</script>


<style lang="scss" scoped>
	.container {
		margin: 20px 10px;

		.pos {
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				flex: 1;
			}

			.pos-select {
				flex: 2
			}
		}
	}
</style>